<template>
  <div class="flex">
    <div class="allocation">
      <div class="homePageCard first">
        <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
          <div class="titleName">队伍调配</div>
          <a @click="goRouter('team')">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <el-table class="topTable" :header-cell-style="tableHeaderColor" ref="multipleTable" show-summary :row-class-name="tableRowClassName" :data="tableData1" height="185px" max-height="185px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="typeName" label="队伍类型" align="center">
          </el-table-column>
          <el-table-column prop="assigned" label="已调配" align="center">
          </el-table-column>
          <el-table-column prop="onTheWay" label="在途中" align="center">
          </el-table-column>
          <el-table-column prop="achieve" label="已到达" align="center">
          </el-table-column>
        </el-table>
        <el-table class="bottomTable" :header-cell-style="{ background:'#265CFF',color:'#fff','font-size':'12px'}" ref="multipleTable" :data="tableData11" height="225px" max-height="225px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="unit" label="所属单位" align="center" width="130">
          </el-table-column>
          <el-table-column prop="teamName" label="队伍名称" align="left" width="125">
          </el-table-column>
          <el-table-column prop="teamMajor" label="队伍专业" align="center" width="58">
          </el-table-column>
          <el-table-column prop="memberNum" label="队伍人数" align="center" width="50">
          </el-table-column>
          <el-table-column prop="occupation" label="状态" align="center" width="50">
            <template slot-scope="scope">
              <div :style="{color:getColorByNation(scope)}">{{scope.row.occupation == 1 ? '已调配' : scope.row.occupation == 2 ? '在途中':scope.row.occupation == 3 ? '已到达':''}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="homePageCard">
        <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
          <div class="titleName">车辆调配</div>
          <a @click="goRouter('car')">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <el-table class="topTable" :header-cell-style="tableHeaderColor" ref="multipleTable" show-summary :row-class-name="tableRowClassName" :data="tableData3" height="185px" max-height="185px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="typeName" label="车辆类型" align="center">
          </el-table-column>
          <el-table-column prop="assigned" label="已调配" align="center">
          </el-table-column>
          <el-table-column prop="onTheWay" label="在途中" align="center">
          </el-table-column>
          <el-table-column prop="achieve" label="已到达" align="center">
          </el-table-column>
        </el-table>
        <el-table class="bottomTable" :header-cell-style="{ background:'#265CFF',color:'#fff','font-size':'12px'}" ref="multipleTable" :data="tableData33" height="225px" max-height="225px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="unit" label="所属单位" align="center" width="130">
          </el-table-column>
          <el-table-column prop="vehicleNum" label="车牌号码" align="center" width="75">
          </el-table-column>
          <el-table-column prop="vehicleProperties" label="车辆性质" align="center" width="70">
          </el-table-column>
          <el-table-column prop="vehicleUsage" label="车辆用途" align="center" width="89">
          </el-table-column>
          <el-table-column prop="occupation" label="状态" align="center" width="50">
            <template slot-scope="scope">
              <div :style="{color:getColorByNation(scope)}">{{scope.row.occupation == 1 ? '已调配' : scope.row.occupation == 2 ? '在途中':scope.row.occupation == 3 ? '已到达':''}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="allocation">
      <div class="homePageCard first">
        <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
          <div class="titleName">物资调配</div>
          <a @click="goRouter('material')">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <el-table class="topTable" :header-cell-style="tableHeaderColor" ref="multipleTable" show-summary :row-class-name="tableRowClassName" :data="tableData2" height="185px" max-height="185px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="typeName" label="物资类型" align="center" width="140">
          </el-table-column>
          <el-table-column prop="assigned" label="已调配" align="center">
          </el-table-column>
          <el-table-column prop="onTheWay" label="在途中" align="center">
          </el-table-column>
          <el-table-column prop="achieve" label="已到达" align="center">
          </el-table-column>
        </el-table>
        <el-table class="bottomTable" :header-cell-style="{ background:'#265CFF',color:'#fff','font-size':'12px'}" ref="multipleTable" :data="tableData22" height="225px" max-height="225px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="unit" label="所属单位" align="center" width="130">
          </el-table-column>
          <el-table-column prop="smallCategory" label="物资小类" align="center" width="138">
          </el-table-column>
          <el-table-column prop="measure" label="计量单位" align="center" width="48">
          </el-table-column>
          <el-table-column prop="count" label="数量" align="center" width="48">
          </el-table-column>
          <el-table-column prop="occupation" label="状态" align="center" width="50">
            <template slot-scope="scope">
              <div :style="{color:getColorByNation(scope)}">{{scope.row.occupation == 1 ? '已调配' : scope.row.occupation == 2 ? '在途中':scope.row.occupation == 3 ? '已到达':''}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="homePageCard">
        <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
          <div class="titleName">装备调配</div>
          <a @click="goRouter('equipment')">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <el-table class="topTable" :header-cell-style="tableHeaderColor" ref="multipleTable" show-summary :row-class-name="tableRowClassName" :data="tableData4" height="185px" max-height="185px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="typeName" label="装备类型" align="center">
          </el-table-column>
          <el-table-column prop="assigned" label="已调配" align="center">
          </el-table-column>
          <el-table-column prop="onTheWay" label="在途中" align="center">
          </el-table-column>
          <el-table-column prop="achieve" label="已到达" align="center">
          </el-table-column>
        </el-table>
        <el-table class="bottomTable" :header-cell-style="{ background:'#265CFF',color:'#fff','font-size':'12px'}" ref="multipleTable" :data="tableData44" height="225px" max-height="225px" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column prop="unit" label="所属单位" align="center" width="130">
          </el-table-column>
          <el-table-column prop="largeCategory" label="装备小类" align="center" width="55">
          </el-table-column>
          <el-table-column prop="smallCategory" label="装备名称" align="center" width="139">
          </el-table-column>
          <el-table-column prop="count" label="数量" align="center" width="40">
          </el-table-column>
          <el-table-column prop="occupation" label="状态" align="center" width="50">
            <template slot-scope="scope">
              <div :style="{color:getColorByNation(scope)}">{{scope.row.occupation == 1 ? '已调配' : scope.row.occupation == 2 ? '在途中':scope.row.occupation == 3 ? '已到达':''}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getReserveByGroup, getReserveByOccupation } from "@/api/EmergencyDisposal/zydp.js";
export default {
  name: "Allocation",
  data() {
    return {
      tableData1: [],
      tableData11: [],
      tableData2: [],
      tableData22: [],
      tableData3: [],
      tableData33: [],
      tableData4: [],
      tableData44: [],
      teamturnPages: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      vehicleturnPages: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      suppliesturnPages: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      equipturnPages: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      }
    };
  },
  mounted() {
    this.getReserveByGroups();
    this.getReserveByOccupations();
    // this.GetTeamResources();
    // this.GetVehicleResources();
    // this.GetEquipResources();
    // this.GetSuppliesResources();
  },
  methods: {
    async getReserveByGroups() { // 上面4个table调配情况
      const res = await getReserveByGroup();
      this.tableData1 = res.team;
      this.tableData3 = res.vehicle;
      this.tableData2 = res.supplies;
      this.tableData4 = res.equip;
    },
    async getReserveByOccupations() { // 下面4个table物资明细
      const res = await getReserveByOccupation();
      this.tableData11 = res.teams;
      this.tableData33 = res.vehicle;
      this.tableData22 = res.supplies;
      this.tableData44 = res.equips;
    },
    // async teamloadMore () { // 队伍
    // v-load-more.expand="{func: equiploadMore, target: '.el-table__body-wrapper', distance: 0}" :load-more-disabled="false"
    //   if (this.teamturnPages.pageSize * this.teamturnPages.pageNum <= this.teamturnPages.total) {
    //     this.teamturnPages.pageNum++;
    //     const res = await GetTeamResource({
    //       pageNum: this.teamturnPages.pageNum,
    //       pageSize: 10
    //     });
    //     this.tableData11 = this.tableData11.concat(res.data);
    //   } else {
    //     console.log("没有更多数据了");
    //   }
    // },
    // async vehicleloadMore () { // 车辆
    //   if (this.vehicleturnPages.pageSize * this.vehicleturnPages.pageNum <= this.vehicleturnPages.total) {
    //     this.vehicleturnPages.pageNum++;
    //     const res = await GetVehicleResource({
    //       pageNum: this.vehicleturnPages.pageNum,
    //       pageSize: 10,
    //       noLoading: true
    //     });
    //     this.tableData33 = this.tableData33.concat(res.data);
    //   } else {
    //     console.log("没有更多数据了");
    //   }
    // },
    // async suppliesloadMore () { // 物资
    //   if (this.suppliesturnPages.pageSize * this.suppliesturnPages.pageNum <= this.suppliesturnPages.total) {
    //     this.suppliesturnPages.pageNum++;
    //     const res = await GetSuppliesResource({
    //       pageNum: this.suppliesturnPages.pageNum,
    //       pageSize: 10
    //     });
    //     this.tableData22 = this.tableData22.concat(res.data);
    //   } else {
    //     console.log("没有更多数据了");
    //   }
    // },
    // async equiploadMore () { // 装备
    //   if (this.equipturnPages.pageSize * this.equipturnPages.pageNum <= this.equipturnPages.total) {
    //     this.equipturnPages.pageNum++;
    //     const res = await GetEquipResource({
    //       pageNum: this.equipturnPages.pageNum,
    //       pageSize: 10
    //     });
    //     this.tableData44 = this.tableData44.concat(res.data);
    //   } else {
    //     console.log("没有更多数据了");
    //   }
    // },
    // async GetTeamResources () { // 队伍台账
    //   const res = await GetTeamResource({
    //     pageNum: 0,
    //     pageSize: 10
    //   });
    //   this.teamturnPages.total = res.total;
    //   this.tableData11 = res.data;
    // },
    // async GetVehicleResources () { // 车辆台账
    //   const res = await GetVehicleResource({
    //     pageNum: 1,
    //     pageSize: 10
    //   });
    //   this.vehicleturnPages.total = res.total;
    //   this.tableData33 = res.data;
    //   console.log(res, "车辆台账");
    // },
    // async GetSuppliesResources () { // 物资台账
    //   const res = await GetSuppliesResource({
    //     pageNum: 1,
    //     pageSize: 10
    //   });
    //   this.suppliesturnPages.total = res.total;
    //   this.tableData22 = res.data;
    //   console.log(res, "物资台账");
    // },
    // async GetEquipResources () { // 装备台账
    //   const res = await GetEquipResource({
    //     pageNum: 1,
    //     pageSize: 10
    //   });
    //   this.equipturnPages.total = res.total;
    //   this.tableData44 = res.data;
    //   console.log(res, "装备台账");
    // },

    goRouter(type) {
      this.$router.push({
        name: "ResourceRequestList",
        query: { type: type }
      });
    },
    childData(param) {
      console.log(param);
    },
    getColorByNation(scope) {
      if (scope.row.occupation == 0) {
        return "#FFFFB9";
      } else if (scope.row.occupation == 1) {
        return "#048FFF";
      } else if (scope.row.occupation == 2) {
        return "#95F204";
      } else if (scope.row.occupation == 3) {
        return "#F59167";
      }
    },
    // header 颜色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return "background-color: transparent;color:#fff;font-size:16px;font-weight:100;";
      } else if (rowIndex === 0 && columnIndex === 1) {
        return "background-color: transparent;color:#048FFF;font-size:16px;font-weight:100;";
      } else if (rowIndex === 0 && columnIndex === 2) {
        return "background-color: transparent;color:#95F204;font-size:16px;font-weight:100;";
      } else if (rowIndex === 0 && columnIndex === 3) {
        return "background-color: transparent;color:#F5885C;font-size:16px;font-weight:100;";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-row";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
}
.allocation {
  width: 50%;
  height: 98vh;
  border-radius: 5px;
  margin-right: 10px;
  .homePageCard {
    height: 48.3vh;
    .cardTitle {
      height: 30px;
    }
  }
  .first {
    margin-bottom: 1vh;
  }
}
.cardTitle a {
  color: #fff;
  font-weight: 100;
  font-size: 16px;
}
:deep(.el-table .el-table__cell.gutter) {
  background: transparent;
}
:deep(.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed) {
  border-right: none;
}
:deep(.el-table--border th.el-table__cell, .el-table__fixed-right-patch) {
  border-bottom: none;
}
:deep(.el-table td.el-table__cell) {
  border-bottom: none !important;
}
:deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
  border-bottom: none !important;
}
:deep(.el-table--small .el-table__cell) {
  padding: 4px 0;
}
:deep(.el-table--border, .el-table--group) {
  border: none;
}
:deep(.el-table--border::after, .el-table--group::after) {
  width: 0;
}
:deep(.el-table::before) {
  height: 0;
}
:deep(.el-table tr) {
  font-family: "微软雅黑";
  background-color: transparent;
  color: #fff;
  font-weight: 100;
  font-size: 16px;
}
:deep(.el-table th.el-table__cell > .cell) {
  padding-left: 0;
  padding-right: 0;
}
:deep(.el-table thead.is-group th.el-table__cell) {
  background: transparent;
}
:deep(.el-table, .el-table__expanded-cell) {
  .background-row {
    background: rgba(104, 168, 244, 0.2);
  }
  background-color: transparent;
  .el-table__body-wrapper.is-scrolling-left {
    height: 482px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba(104, 168, 244, 0.2) !important;
  }
  .el-table td {
    border-bottom: none;
    color: #fff;
    font-size: 16px;
  }
  .el-table th {
    border-bottom: none;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }
  .el-table__body tr:hover > td {
    background-color: rgba(104, 168, 244, 0.2) !important;
  }
  .el-table__body tr.current-row > td {
    background-color: rgba(104, 168, 244, 0.2) !important;
  }
}
:deep(.el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell) {
  background-color: rgba(104, 168, 244, 0.2);
  color: #fff;
}
:deep(.el-table__footer-wrapper td.el-table__cell) {
  border-top: none;
}
:deep(.el-table.bottomTable) {
  font-size: 12px;
  margin-top: 5px;
  div.cell {
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
  }
  th.el-table__cell {
    background-color: #265cff;
  }
}
:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
}
:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background: rgba(215, 215, 215, 0.4);
}
:deep(div::-webkit-scrollbar) {
  width: 5px;
}
:deep(::-webkit-scrollbar-corner) {
  background: transparent;
}
</style>
